<template>
  <div class="wrapper">
	  <div class="content_wrap">
		  <div class="homeHot-content" v-for='item of homeHotContent' :key='item.id'>
			  <div class="homeHot_wrap">
				  <div class="left-text">
				  		<h2>{{item.contentText}}</h2>
				  		<p class='Stuta' :style='{color:item.contentColor}'>{{item.contentStuta}}</p>
				  </div>
				  <div class="left-img">
				  		<img class="img" :src="item.imgUrl">
				  </div>
			  </div>
		  </div>
	  </div>
  </div>
</template>

<script>
export default {
  name: 'homeHot',
  data(){
	  return{
		  homeHotContent:[
			  {
				  id:'00001',
				  contentText:'1元玩景点',
				  contentStuta:'PLUS会员',
				  imgUrl:'//pic5.40017.cn/02/000/64/5c/rBLkCFqp0MaAXcDOAAASHzYoUEI450.png',
				  contentColor:'#ebb73f'
			  },
			  {
				  id:'00002',
				  contentText:'出境特卖',
				  contentStuta:'每日上新',
				  imgUrl:'//pic5.40017.cn/01/001/d2/88/rBLkBlrz5OGARo6VAAAZQDF46aE442.png',
				  contentColor:'#ff7e60'
			  },
		  ]
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
	width:100%
	border-top:1px solid #e4e4e4
	.content_wrap
		width:90%
		margin:0 auto
		display:flex
		.homeHot-content:nth-child(2)
			.homeHot_wrap
				border-left:1px solid #ccc
				padding-left:10px
		.homeHot-content
			width:100%
			.homeHot_wrap
				width:100%
				margin:0 auto
				padding:20px 0
				position:relative
				.left-img
					position:absolute
					width:70px
					right:5px
					top:5px
					.img
						width:100%
				.left-text
					width:auto
					margin-top:4vm
					h2
						font-size:4vm
						width:50%
					.Stuta
						width:40%
						border:1px solid 
						border-radius:50px
						font-size:8px
						text-align:center
						height:15px
						line-height:15px
						margin-top:5px
</style>
